const fs = require("fs-extra")
const path = require("path")
const readVueScript = require("./readVueScript.js")
const trannformJS = require("./transformJS.js")
const { transformCssGroup } = require("./transformCSS.js")
const readSrcVue = require("./testGlob.js")
const { generateRandomString } = require("./utils.js")
const tansformFile = async (content) => {
  const [template, script, styleList] = readVueScript(content)
  const uglyCode = await trannformJS(script)
  const stylecode = await transformCssGroup(styleList)
  const output = `${template}<script>${uglyCode}</script><style>${stylecode
    .map((item) => item.css)
    .join("")}</style>`
  return output
}
const foo = async () => {
  const vueFile = await readSrcVue()
  vueFile.forEach(({ filePath, content }) => {
    const filename = path.basename(filePath)
    const outputPath = filePath.replace(
      filename,
      `${generateRandomString()}.vue`
    )
    tansformFile(content)
      .then((res) => {
        fs.writeFileSync(outputPath, res, {
          encoding: "utf8",
        })
      })
      .catch((e) => {
        console.log(e)
      })
  })
}

module.exports = foo
